<template>
  <div>
    <div class="header">
      <div class="text">
        返厂编号：<div class="number">20230622534981032</div> <span>待审核</span>
      </div>
      <div class="btns">
        <el-button class="btn_cancel">作废返厂</el-button>
        <el-button color="#e69103" class="btn_save">审核返厂</el-button>
      </div>
    </div>

    <!-- 返厂信息 -->
    <div class="call-content">
      <h3>返厂信息</h3>
      <table class="table">
        <colgroup>
          <col width="90" />
          <col />
          <col width="90" />
          <col />
          <col width="90" />
          <col />
          <col width="90" />
          <col />
        </colgroup>
        <tbody>
          <tr>
            <td class="bg-gray"><b>返厂类型</b></td>
            <td id="workLevel2" data-type="测试"
              >测试<el-button color="#00c0c0" class="btn_save btn-type">修改</el-button></td
            >
            <td class="bg-gray"><b>返厂单号</b></td>
            <td id="workNo2">20230622534981032</td>
            <td class="bg-gray"><b>申请时间</b></td>
            <td id="applyTime">2023-06-22 14:42:16</td>
            <td class="bg-gray"><b>申请人员</b></td>
            <td id="currentTime">demo</td>
          </tr>
          <tr>
            <td class="bg-gray"><b>返厂地址</b></td>
            <td colspan="7" id="userInfo" rowspan="1"
              >广东省中山市小榄镇666 007 15676899647
              <el-button color="#00c0c0" class="btn_save btn-type">修改</el-button></td
            >
          </tr>
          <tr>
            <td class="bg-gray"><b>寄回地址</b></td>
            <td colspan="7" id="userAdd" rowspan="1"
              >吉林省白城市大安市大安马场8888888 admin 18088888888</td
            >
          </tr>
          <tr>
            <td class="bg-gray"><b>返厂备注</b></td>
            <td colspan="7" id="userAdd1" rowspan="1"></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 返厂清单 -->
    <div class="call-list">
      <div class="title">
        <h3>返厂清单</h3>
        <span class="chan-list">修改清单</span>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData" style="width: 100%">
          <el-table-column show-overflow-tooltip type="selection" width="40" />
          <el-table-column type="index" :index="indexMethod" label="序号" width="70" />
          <el-table-column show-overflow-tooltip prop="date" label="产品类型" width="120" />
          <el-table-column show-overflow-tooltip prop="state" label="产品条码" min-width="200" />
          <el-table-column show-overflow-tooltip prop="city" label="产品信息" width="200" />
          <el-table-column show-overflow-tooltip prop="city" label="物流信息" width="120" />
          <el-table-column show-overflow-tooltip prop="state" label="附件" width="120" />
          <el-table-column show-overflow-tooltip prop="city" label="备注" width="120" />
          <el-table-column show-overflow-tooltip prop="state" label="状态" width="120" />
          <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
            <template #default="scope">
              <div class="btns">
                <button class="btn-table bgColor5" @click="deleteList(scope.$index)">删除</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 事件记录 -->
    <div class="call-recond">
      <h3>事件记录</h3>
      <div class="table">
        <el-table border stripe resizable :data="tableData" style="width: 100%">
          <el-table-column show-overflow-tooltip prop="name" label="时间" width="200" />
          <el-table-column show-overflow-tooltip prop="date" label="操作人" width="200" />
          <el-table-column show-overflow-tooltip prop="state" label="操作备注" min-width="200" />
          <el-table-column show-overflow-tooltip prop="state" label="附件" width="200" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.returnFactoryManager.returnFactoryDetail,
  })

  const route = useRoute()
  const name = route.query.name
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  // 删除清单
  const deleteList = (n: number) => {}

  const tableData = [
    {
      date: '公司备88888888888',
      name: '空调外机风叶（122.54411）',
      state: 'California',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
  ]
</script>

<style lang="scss" scoped>
  @import './index';
</style>
